<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>

    <button id="btn1">按钮</button>
    <button onclick="fun()">按钮</button>
    <script>
        // (es5) this永远指向最后调用他的那个对象


        function a() {
            console.log(this);//window
        }
        window.a()

        var obj = {
            b: function () {
                console.log(this);//obj
            }
        }

        obj.b()

        btn1.onclick = function () {
            console.log(this);//btn1  
        }
        function fun() {
            console.log(this);//window
        }
        // 总结: this指向:1.全局作用域this指向window
        // 2.对象方法内部,this指向当前对象
        // 3.在事件处理函数内部,this指向当前绑定事件的dom对象

        // -------特殊情况--------

        var obj2 = {
            fun: function () {
                console.log(this);//obj2
                setTimeout(function () {
                    // 在计时器中 this会被还原成window
                    console.log(this);//window
                })
            }
        }
        obj2.fun()

        // 修改this指向

        var name = "吴亦凡";
        var obj3 = {
            name: "罗志祥",
            fun: function () {
                console.log(this.name);//罗志祥
                var _this = this;
                setTimeout(function () {
                    console.log(_this.name);//罗志祥
                });
            }
        }
        obj3.fun()



        var wuyifan = {
            name: "吴亦凡"
        }
        var luozhixiang = {
            name: "罗志祥",
            fn:function(a,b,c){
                console.log(this);
                console.log(a+b+c);
            }
        }


        // 相同点:在修改this指向的同时,会调用函数,第一个参数是修改this指向谁
        // 不同点: 传参的方式不用 apply() 第二个参数是一个数组,数组里面填写的是调用函数的时候传递的参数
        //                      call()从第二个参数开始 都是调用这个函数的时候传递的参数
        luozhixiang.fn.apply(wuyifan,[1,2,3])
        luozhixiang.fn.call(wuyifan,1,2,3)

        // bind() 在修改this指向的时候,不会调用函数,会返回一个新的函数,新函数和原来的函数一模一样,但是在新的函数执行的时候,其中的this是修改之后的this
        var fun= luozhixiang.fn.bind(wuyifan);

        // fun(10,20,30)



        // 总结: 如何修改this指向
                //    1.使用es6箭头函数(后续详解)
                    // 2.在函数内部声明变量储存this   (不建议使用)
                    // 3.建议使用  apply  call bind


    </script>
</body>

</html>